<template>
  <div style="width:95%;margin:auto;">
    <!-- ========= 条件查询 ========= -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="form.status" placeholder="订单状态" clearable style="width:160px">
          <el-option label="未审批" :value="0"/>
          <el-option label="未通过" :value="1"/>
          <el-option label="已通过" :value="2"/>
          <el-option label="已归还" :value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input-number
          v-model="form.totalAmount"
          :precision="2"
          :min="0"
          :step="0.01"
          placeholder="总金额≥"
          style="width:160px"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-date-picker v-model="form.startDate" type="date" placeholder="起租时间" clearable/>
      </el-form-item>

      <el-form-item>
        <el-date-picker v-model="form.endDate" type="date" placeholder="归还时间" clearable/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="Search" @click="doSearch(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- ========= 列表 ========= -->
    <el-table :data="page.list" border style="width:95%;margin:auto;">
      <el-table-column label="订单编号" prop="oid" width="100"/>
      <el-table-column label="汽车" width="140">
        <template #default="{row}">{{ row.car?.cname }}</template>
      </el-table-column>
      <el-table-column label="起租时间" prop="startDate" />
      <el-table-column label="归还时间" prop="endDate" />
      <el-table-column label="总金额" prop="totalAmount" />
      <el-table-column label="订单状态" width="100">
        <template #default="{row}">
          <el-tag v-if="row.status===0" type="info">未审批</el-tag>
          <el-tag v-else-if="row.status===1" type="danger">未通过</el-tag>
          <el-tag v-else-if="row.status===2" type="success">已通过</el-tag>
          <el-tag v-else-if="row.status===3" type="info">已归还</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="90">
        <template #default="{row}">
          <el-button type="primary" size="small" :icon="Search" circle @click="showDetail(row)"/>
        </template>
      </el-table-column>
    </el-table>

    <!-- ========= 分页 ========= -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.total"
      v-model:current-page="form.pageNum"
      v-model:page-size="form.pageSize"
      @current-change="doSearch"
      style="width:95%;margin:15px auto;"
    />

    <!-- ========= 订单详情弹窗（直接写在这里） ========= -->
    <el-dialog title="订单详情" v-model="detailVisible" width="480px" :close-on-click-modal="false">
      <div style="font-size:14px;line-height:28px;">
        <div style="display:flex;margin-bottom:12px;">
          <img :src="detailRow.car?.photo" style="width:120px;height:80px;object-fit:cover;border-radius:4px"/>
          <div style="margin-left:12px;">
            <div><b>订单编号：</b>{{ detailRow.oid }}</div>
            <div><b>汽车：</b>{{ detailRow.car?.cname }}</div>
            <div><b>品牌/型号：</b>{{ detailRow.car?.brand }} / {{ detailRow.car?.model }}</div>
          </div>
        </div>
        <div><b>起租时间：</b>{{ detailRow.startDate }}</div>
        <div><b>归还时间：</b>{{ detailRow.endDate }}</div>
        <div><b>总金额：</b><span style="color:#f56c6c;font-weight:bold">¥{{ detailRow.totalAmount }}</span></div>
        <div><b>订单状态：</b>
          <el-tag v-if="detailRow.status===0" type="info">未审批</el-tag>
          <el-tag v-else-if="detailRow.status===1" type="danger">未通过</el-tag>
          <el-tag v-else-if="detailRow.status===2" >已通过</el-tag>
          <el-tag v-else type="info">已归还</el-tag>
        </div>
      </div>
      <template #footer>
        <el-button @click="detailVisible=false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import request from '@/utils/request'
//引入useCounterStore实例
import { useUserStore } from '../stores/userStore'
//创建stote实例
let store = useUserStore();

/* 查询条件 */
const form = reactive({
  pageNum: 1,
  uid:store.userinfo.uid,
  pageSize: 8,
  status: undefined,
  totalAmount: undefined,
  startDate: '',
  endDate: ''
})

/* 列表 & 总条数 */
const page = reactive({ list: [], total: 0 })

/* 详情弹窗 */
const detailVisible = ref(false)
const detailRow = ref({})
const showDetail = row => {
  detailRow.value = row
  detailVisible.value = true
}

/* 日期格式化 */
const fmt = d => d ? dayjs(d).format('YYYY-MM-DD') : null

/* 查询 */
const doSearch = async (p = 1) => {
  form.pageNum = p
  const params = { ...form, startDate: fmt(form.startDate), endDate: fmt(form.endDate) }
  const res = await request.post('/orders/myOrdersQueryCondition', params)
  if (res.data.success) {
    page.list = res.data.data.list
    page.total = res.data.data.total
  } else {
    ElMessage.error(res.data.msg || '查询失败')
  }
}

onMounted(() => doSearch(1))
</script>